<template>
    <div class="layout">
        <div class="main">
            <div class="article_list">
                <article_item class="item"
                :article="item"
                :writer="props.userList.get(item.uid)"
                @toDetail="toDetail"
                v-for="item in article" :key="item.articleId" />
            </div>
            <div v-for="i in 0" :key="i">
                测试
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import article_item from '../components/article_item.vue';
import axios from 'axios';
const router = useRouter()
const article = ref(null)
const props = defineProps(['user','userList'])

onMounted(()=>{
    //获取文章列表
    axios.get('/api/articles')
    .then(res=>{
        article.value = res.data.data
    }).catch(e=>{
        console.log(e)
    }).catch(e => {
			ElMessage({
				message:"服务器异常，请联系管理员B站诺丁汉小森林",
				type:"error"
			})
	})
})

const toDetail = function(articleId,uid) {
    // 接受article_item触发的事件，跳转到文章详情
    router.push({
        path:'/article',
        query:{
            articleId:articleId,
            uid:uid
        }
    })
}

</script>

<style lang="scss" scoped>

.layout {
    margin-top: 5rem;
    width: 100%;
    height: 100%;
}
.article_list {
    
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    .item {
        margin:10px 10px
    }
    -webkit-background-size: cover;
    -o-background-size: cover;                
    background-size: cover;
    object-fit: fill;
    background: url(/fill-black-right.png)  center center fixed;
    background-color: #333;
}
</style>